<template>
  <div>
    <!-- 卡基础信息 -->
    <el-form ref="form" :model="dataForm" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="卡编号：">
            <el-input v-model="dataForm.cardNo" readonly>
              <template slot="append">{{ dataForm.id ? (dataForm.masterUid ? '副卡' : '主卡') : '#' }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卡名称：">
            <el-input v-model="dataForm.cardName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卡类型：">
            <el-input v-model="dataForm.cardTypeName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="卡状态：">
            <el-input v-model="dataForm.cardStatusName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发卡油站：">
            <el-input v-model="dataForm.stationName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发卡日期：">
            <el-input v-model="dataForm.buildDate" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开票类型：">
            <el-input v-model="dataForm.invoiceTypeName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户姓名：">
            <el-input v-model="dataForm.username" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户电话：">
            <el-input v-model="dataForm.phone" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号：">
            <el-input v-model="dataForm.idCardNo" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌号码：">
            <el-input v-model="dataForm.carNumber" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="账户余额：">
            <el-input v-model="dataForm.balance" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="本金余额：">
            <el-input v-model="dataForm.capitalBalance" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="赠金余额：">
            <el-input v-model="dataForm.giftBalance" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会员ID：">
            <el-input v-model="dataForm.memberId" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="可用油品：">
            <!-- <el-input v-model="dataForm.usableFuelNames" readonly></el-input> -->
            <el-checkbox-group v-model="usableFuelList">
              <el-checkbox label="0#"></el-checkbox>
              <el-checkbox label="92#"></el-checkbox>
              <el-checkbox label="95#"></el-checkbox>
              <el-checkbox label="98#"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="可用油站：">
            <el-checkbox-group v-model="usableStationIds">
              <el-checkbox v-for="item in stationList" :key="item.id" :label="item.id + ''">{{
                  item.stationName
                }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {getStationList} from '@/api/baseInfo'

export default {
  name: 'CardBaseInfo',
  props: ['cardInfo'],
  data () {
    return {
      dataForm: {},
      usableFuelList: [],
      usableStationIds: [],
      stationList: []
    }
  },
  mounted () {
    getStationList().then(res => {
      console.log(res)
      this.stationList = res.data
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {},
  watch: {
    cardInfo (newVal, oldVal) {
      this.dataForm = newVal
      this.usableFuelList = (newVal.usableFuelNames || '').split(',')
      this.usableStationIds = (newVal.usableStationIds || '').split(',')
    }
  }
}
</script>

<style scoped>
.btn-bar {
  float: right;
}
</style>